<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>父组件范围</h3>
        <p>info:{{ info }}</p>
        <p>test:{{ test }}</p>
        <input type="text" v-model="test"><br><br>
        <input type="button" value="调用printThis" @click="printThis()">
        <hr>
        <child-one></child-one>
    </div>
</body>
<script type="text/x-template" id="one">
    <div class="box">
        <h3>子组件范围</h3>
        <p>test:{{ test }}</p>
        <input type="text" v-model="test"><br><br>
        <input type="button" value="调用printThis" @click="printThis()">

    </div>
</script>
<script>
    // Vue的 mixin 混合技术
    //       该技术的目的是通过统一配置定义的方式，为项目的需求组件进行统一配置加载
    // Vue.mixin(options)
    //          options 接受和 Vue.extend相同的相关实例配置，除 el 、template 和 render
    //          混合后的方法只和构成时的组件有关，this 指向于调用该方法的组件实例
    //          混合的配置最终会整合到组件本身的配置中
    //          混合时如果出现配置重名，除生命周期函数外，都是保留组件自己的配置定义
    //          生命周期在混合时出现重复定义，会进行方法合并
    Vue.mixin({
        data(){
            return {
                test:"测试混合"
            }
        },
        methods: {
            printThis(){
                console.log(this);
            }
        },
        mounted() {
            console.log("Vue.mixin的mounted")  
        },
    });
    const obj = {
        data(){
            return {
                arg:"独立数据"
            }
        }
    }
    const computedObj = {
        computed:{
            getParams(){
                return "params";
            }
        }
    }

    Vue.component("ChildOne",{
        template:"#one",
        // mixins 表示为当前组件进行独立混合操作
        // mixins 取值为 数组数据，数组中的每个元素都为 对象数据
        //         对象数据是提供独立的vue实例配置项
        mixins:[obj,computedObj]
    })

    new Vue({
        el:"#app",
        data:{
            info:"info"
        },
        methods: {
            printThis(){
                console.log("newVue自己的printThis",this);
            }
        },
        mounted() {
            console.log("newVue自己的mounted")  
        },
    })
</script>
</html>